import { useEffect } from 'react';
import './App.css';

import { Scene, GaodeMapV2, PointLayer } from '@antv/l7';

function App() {
  useEffect(() => {
    console.log('App.js');
    const scene = new Scene({
      id: 'map',
      map: new GaodeMapV2({
        center: [121.45, 31.22],
        pitch: 0,
        style: 'dark',
        key: 'bcc1640e7c490a9c4fc8b41ce5389427',
        zoom: 10,
        dragEnable: false, // 是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false // 旋转
      }),
    });

    var data = [
      { lng: 121.642167, lat: 31.195285 },// 川杨新苑
      { lng: 121.327908, lat: 31.200329 },// 虹桥火车站
    ];

    var layer = new PointLayer()
    .source(data, {
      parser: {
        type: 'json',
        x: 'lng',
        y: 'lat',
      }
    })
    .shape('circle')
    .size(56)
    .active(true)
    .animate(true)
    .color('#4cfd47')
    .style({
      opacity: 1
    });

    scene.on('loaded', () => {
      scene.addLayer(layer);
    });

  }, []); 

  return (
    <div id="map"></div>
  );
}

export default App;
